<!-- 获取组织机构列表 -->
<template>
  <el-cascader :class="customClass" :disabled="disabled" :popper-class="popperClass" :props="{ checkStrictly: true }"
               :placeholder="placeholder" :change-on-select="changeOnSelect" v-model="selectedOptions" clearable
               :options="options" @change="changeDept"
               filterable ref="refHandle"></el-cascader>
</template>

<script>
  import {
    getOrganizationTree,
  } from '@/services/model/user'
  import {getLocalStorageItem, setLocalStorageItem} from '@/utils/storage-helper'
  import {ORGANIZATION_TREE} from '@/utils/constant'

  export default {
    props: {
      placeholder: {
        type: String,
        default: '请选择'
      },
      customClass: String,
      popperClass: String,
      disabled: Boolean,
      changeOnSelect: {
        type: Boolean,
        default: false
      },
    },
    watch: {
      //任选一级时，自动关闭选项框
      selectedOptions() {
        if (this.$refs.refHandle) {
          this.$refs.refHandle.dropDownVisible = false; //监听值发生变化就关闭它
        }
      }
    },
    computed: {
      selectedOptions: {
        get(val) {
          if (val.$attrs.value) {
            return val.$attrs.value.split('-') || []
          } else {
            return []
          }
        },
        set(val) {
          this.newOptions = val.join('-')
          this.$emit('input', this.newOptions)
        }
      }
    },
    methods: {
      changeDept() {
        this.$emit("change")
      },
      async getOrganizationTree() {
        let org = getLocalStorageItem(ORGANIZATION_TREE)
        if (!org || org === null) {
          let res = await getOrganizationTree();
          org = res.data
          setLocalStorageItem(ORGANIZATION_TREE, res.data, 1)
        }
        this.options = org
      },
      //控制重新访问接口
      async getOrganizationTreeTwo() {
        let res = await getOrganizationTree({unitType: 2});
        let org = res.data
        this.options = org
      },
    },
    data() {
      return {
        options: [],
        newOptions: '',
      }
    },
    mounted() {
      this.getOrganizationTree()
    }
  }
</script>

<style>
</style>
